<template>
  <div class="mapmng-container">
    <div class="data-list">
      <div class="title" @click="toogleShowDetial">
        <svg class="icon icon-baojing1" aria-hidden="true">
          <use xlink:href="#icon-baojing1"/>
        </svg>
        <span>实时报警</span>
        <pagego :path="equipmentmngPath"/>
        <div class="right-toogle-btn">
          <i slot="reference" class="el-icon-arrow-down" />
        </div>
      </div>
      <!-- eslint-disable-next-line -->
      <div  v-if="itemShow" v-for="(item, index) in dataList" :key="item.id" class="list-info-box">
        <div class="list-item">
          <span class="point-bg"/>
          <span class="id-margin">{{ item.id }}</span>,
          <span>{{ item.datetime }}</span>,
          <span>{{ item.address }}</span>,
          <span>{{ item.msg }}</span>
          <div class="handle-box">
            <el-button type="warning" @click="giveAnAlarm(index)">报警联动</el-button>
            <el-button v-if="activeIndex === index" type="success" @click="takeUp">收起</el-button>
            <el-button v-if="activeIndex !== index" type="success" @click="showDtl(index)">查看详情</el-button>
            <el-button type="danger">消警</el-button>
          </div>
        </div>
        <el-collapse-transition>
          <div v-if="activeIndex === index" class="details-container">
            <div class="details-top">
              <el-radio-group v-model="activeTab">
                <el-radio-button label="预案一"/>
              </el-radio-group>
              <div class="details-top-right">
                <svg class="icon icon-shipin" aria-hidden="true">
                  <use xlink:href="#icon-shipin"/>
                </svg>
                <span>实时监控</span>
              </div>
            </div>
            <transition name="el-zoom-in-center">
              <div v-if="activeTab === '预案一'">
                <div class="details-main">
                  <div class="warning-category">
                    <svg class="icon icon-huo" aria-hidden="true">
                      <use xlink:href="#icon-huo"/>
                    </svg>
                    <span class="text">警情类别</span>
                  </div>
                  <div class="warning-category-desc">
                    <p>预案一:①分析紧急状态确定相应报警级别,根据相关危险类型、潜在后果.现有资源控制紧急情况的行动类型;②指挥、协调应急反应行动; ③与企业外应急反
                    应人员、部门、组织和机构进行联络;④直接监察应急操作人员行动;⑤最大限度地保证现场人员和外援人员及相关人员的安全;⑥协调后勤方面以支援应急反应
                    组织;⑦应急反应组织的启动;⑧应急评估、确定升高或降低应急警报级别。
                    </p>
                  </div>
                </div>
                <div class="details-list">
                  <div class="details-list-item">
                    <svg class="icon icon-gongan" aria-hidden="true">
                      <use xlink:href="#icon-gongan"/>
                    </svg>
                    <span>首义路派出所警队 ，027-89547854 ;文保分局植物所警区,027-25132654</span>
                  </div>
                  <br>
                  <div class="details-list-item">
                    <svg class="icon icon-xiaofangshuan" aria-hidden="true">
                      <use xlink:href="#icon-xiaofangshuan"/>
                    </svg>
                    <span>宣水塔消防队，027-89547854 ;红钢城建七消防队，027-25132654 ;积玉桥消防，027-25132654</span>
                  </div>
                  <br>
                  <div class="details-list-item">
                    <svg class="icon icon-yiyuan" aria-hidden="true">
                      <use xlink:href="#icon-yiyuan"/>
                    </svg>
                    <span>武汉市第一 -医院，027-89547854 ;武汉大学中南医院 ，027-25132654 ;中国人 民解放军武汉总医院，027-25132654</span>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" :show-close="false" title="" width="802px">
      <div class="position-button">
        <span type="warning" class="warning-title">报警联动</span>
      </div>
      <div class="desc-top-mng">
        <h4>告警方式</h4>
        <span>前端录像</span>
        <xl-switch v-model="value1" class="desc-text"/>
        <span>平台录像</span>
        <xl-switch v-model="value2" class="desc-text"/>
        <span>声光报警</span>
        <xl-switch v-model="value4" class="desc-text"/>
      </div>
      <div class="form-list">
        <div class="form-list-row">
          <span>告警种类</span>
          <el-input v-model="warningType" :disabled="true" placeholder="请输入告警种类" size="small"/>
          <span>告警级别</span>
          <el-input v-model="warningLevel" :disabled="true" placeholder="请输入内容" size="small"/>
        </div>
        <div class="form-list-row">
          <span>支援单位</span>
          <el-input v-model="companyId" :disabled="true" placeholder="请输入内容" size="small"/>
          <span>联系方式</span>
          <el-input v-model="phoneinput" :disabled="true" placeholder="请输入内容" size="small"/>
        </div>
        <div class="form-list-row more-margin-top">
          <h4>联动人员</h4>
          <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55"/>
            <el-table-column
              prop="id"
              label="序号"
              width="50"
            />
            <el-table-column
              prop="name"
              label="姓名"
            />
            <el-table-column
              prop="level"
              label="响应人员级别"/>
            <el-table-column
              prop="phone"
              label="联系方式"/>
          </el-table>
        </div>
        <div class="form-list-row">
          <h4>处置方案编制</h4>
          <div class="form-list-p">
            <p>①分析紧急状态确定相应报警级别,根据相关危险类型、潜在后果、现有资源控制紧急情况的行动类型;</p>
            <p>②指挥、协调应急反应行动;</p>
            <p>③与企业外应急反应人员、部门、组织和机构进行联络;</p>
            <p>④直接监察应急操作人员行动;</p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="success" size="small" @click="submitData">完 成</el-button>
      </div>
    </el-dialog>
    <div class="map-container">
      <el-amap :vid="'amap-vue'" :center="center" :zoom="zoom" class="bm-view">
        <el-amap-info-window :position="mywindow.position" :content="mywindow.content" :visible="mywindow.visible"/>
      </el-amap>
    </div>
  </div>
</template>

<script>
import Pagego from '@/components/pageGoBtn/index'
import XlSwitch from '../../components/Switch/index'
import { Message } from 'element-ui'

export default {
  name: 'Mapmng',
  components: {
    Pagego,
    XlSwitch
  },
  data () {
    return {
      zoom: 10,
      center: [114.311618, 30.535766],
      mywindow: {
        position: [114.311618, 30.535766],
        content: `
          <div class="position-info">
            <div class="adress-dtl">
              <h2>PAL003652 </h2>
              <h2>江南春城停车场</h2>
              <br>
              <span class="adress">青山区和平大道与建设四路交叉口西100米</span>
            </div>
            <div class="user-dtl">
              <span class="user-name">张常安</span>
              <span class="phone-num">15271703687</span>
            </div>
            <div class="parking-lot">
              <div class="left parking-lot-item">
                <p>空余车位</p>
                <span>928</span>
              </div>
              <div class="center parking-lot-item">
                <span class="point"></span>
                <span class="point"></span>
                <span class="point"></span>
              </div>
              <div class="right parking-lot-item">
                <p>车位总数</p>
                <span>1698</span>
              </div>
            </div>
            <div class="progress-box">
              <div class="progress-bg">
                <svg class="icon icon-map-stopping" aria-hidden="true">
                  <use xlink:href="#icon-map-stopping"/>
                </svg>
              </div>
            </div>
          </div>`,
        visible: true
      },
      warningType: '种类一',
      warningLevel: 'III级',
      companyId: 'xxx 公司',
      itemShow: false,
      infoWindow: {
        show: true,
        contents: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      },
      options: [{
        value: '1',
        label: 'I级'
      }, {
        value: '2',
        label: 'II级'
      }, {
        value: '3',
        label: 'III级'
      }, {
        value: '4',
        label: 'IV级'
      }, {
        value: '5',
        label: 'V级'
      }],
      selectvalue: '',
      value1: true,
      value2: true,
      value4: false,
      phoneinput: '15906874521',
      dialogFormVisible: false,
      form: {
        parking_name: '',
        ename: '',
        model: '',
        buy_date: '',
        service_live: '',
        manufacturer: '',
        status: ''
      },
      value3: true,
      formLabelWidth: '120px',
      equipmentmngPath: '/example/equipmentmng',
      activeIndex: null,
      activeTab: '预案一',
      dataList: [
        {
          id: 'KPD547935875974',
          datetime: '2018-10-23 10:23:45',
          address: '碧水青山停车场',
          msg: '报警信息车辆停放不正确，停放有误'
        },
        {
          id: 'KPD547935875975',
          datetime: '2018-10-23 10:23:45',
          address: '碧水青山停车场',
          msg: '报警信息车辆停放不正确，停放有误'
        },
        {
          id: 'KPD547935875976',
          datetime: '2018-10-23 10:23:45',
          address: '碧水青山停车场',
          msg: '报警信息车辆停放不正确，停放有误'
        },
        {
          id: 'KPD547935875977',
          datetime: '2018-10-23 10:23:45',
          address: '碧水青山停车场',
          msg: '报警信息车辆停放不正确，停放有误'
        }
      ],
      tableData: [{
        id: '1',
        level: 'I级',
        name: '王小虎',
        phone: '15906874521,027 -98653256'
      }, {
        id: '2',
        level: 'II级',
        name: '张长安',
        phone: '15906874521,027 -98653256'
      }, {
        id: '3',
        level: 'III级',
        name: '里斯本',
        phone: '15906874521,027 -98653256'
      }, {
        id: '4',
        level: 'IV级',
        name: '爱丽米亚',
        phone: '15906874521,027 -98653256'
      },
      {
        id: '5',
        level: 'V级',
        name: '史莱姆',
        phone: '15906874521,027 -98653256'
      }]
    }
  },
  watch: {},
  methods: {
    toogleShowDetial () {
      this.itemShow = !this.itemShow
    },
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    clear () {
      this.infoWindow.contents = ''
    },
    handler ({ BMap, map }) {
      this.center.lng = 114.302962
      this.center.lat = 30.606176
      this.zoom = 15
    },
    showDtl (index) {
      this.activeIndex = index
    },
    takeUp () {
      this.activeIndex = null
    },
    giveAnAlarm () {
      this.dialogFormVisible = true
    },
    submitData () {
      this.dialogFormVisible = false
      Message.success('成功~')
    }
  }
}
</script>

<style  lang="stylus">
.mapmng-container {
  color: #828282;
  margin: 15px;
  .position-button{
    position: absolute;
    top: 24px;
    left: 37px;
  }
  .el-radio-button:first-child .el-radio-button__inner{
    border-radius: 0;
  }
  .el-radio-button:last-child .el-radio-button__inner{
    border-radius: 0;
  }
  .el-radio-button__inner{
    color: #f3cb13;
    border: 1px solid #f3cb13;
  }
  .el-dialog__header{
    height: 86px;
  }
  .warning-title{
    background-color: #e2c009;
    display inline-block
    width 98px;
    height 40px;
    line-height 40px;
    font-size: 14x;
    color: #fff;
    text-align center
  }
  .point-bg{
    display: inline-block;
    background: url('../../assets/img/point.png') no-repeat;
    background-size: 100%;
    background-position: center;
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 12px;
  }
  .id-margin{
    margin-left: 26px;
  }
  .map-container{
    .bm-view{
      width: 100%;
      height: calc(100vh - 210px);
    }
    .higher-height{
      height: 555px;
    }
  }
  .form-list{
    padding: 25px;
    .el-select.el-select--small{
      width: 207px !important;
      margin-right: 50px;
    }
    .el-input.el-input--small{
      width: 207px;
    }
    .form-list-row{
      margin-bottom: 15px;
    }
    .form-list-p{
      line-height: 20px;
      height: 140px;
      padding: 0px 20px;
      border: 1px solid #d2d2d2;
      font-size: 12px;
    }
    .more-margin-top{
      margin-top: 30px;
    }
  }
  .el-dialog__header{
    border-bottom: 1px dotted #d2d2d2;
  }
  .el-dialog__body{
    padding: 10px 0px;
  }
  .desc-top-mng{
    height: 95px;
    border-bottom: 1px dotted #d2d2d2;
    padding-left: 20px;
  }
  .desc-text{
    margin-left: 10px;
    margin-right: 60px;
  }
  .dialog-footer{
    text-align: center;
  }
  .data-list{
    width: 100%;
    box-sizing: content-box;
    background-color: #fff;
    overflow: auto;
    padding-bottom: 10px;
    .title{
      border-bottom: 1px solid #e5e5e5;
      height: 45px;
      line-height: 45px;
      margin-left: 10px;
      cursor: pointer;
      .icon{
        width: 1.5rem;
        height: 1.5rem;
        position: relative;
        top:3px;
      }
      .right-toogle-btn{
        float: right;
        margin-right: 8px;
      }
    }
    .list-item{
      height: 50px;
      font-size: 14px;
      line-height: 50px;
      background-color: #f3f3f3;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
      margin: 10px;
      margin-bottom: 0px;
      padding-bottom: 10px;
      position: relative;
    }
    .handle-box{
      position: absolute;
      right: 10px;
      top: 0px;
      z-index: 10;
    }
    .details-container{
      border: 1px solid #e6e6e6;
      overflow: hidden;
      height: 303px;
      margin: 0 10px;
      margin-top: 0px;
      padding: 10px;
      position: relative;
      text-rendering: auto;
      .details-top{
        margin-top: 10px;
        .details-top-right{
          display: inline-block;
          background-color: #5a99e0;
          text-align: center;
          color:#fff;
          width:137px;
          height: 34px;
          line-height: 34px;
          position: absolute;
          right: 10px;
          .icon{
            width: 24px;
            height: 24px;
            position: relative;
            top: 5px;
          }
        }
      }
      .details-main{
        margin-top: 15px;
        height: 90px;
        .warning-category{
          display: inline-block;
          width: 60px;
          height: 60px;
          background-color: #fa4007;
          color: #fff;
          border-radius: 50%;
          position: relative;
          .text{
            position: absolute;
            bottom: -25px;
            color: #000;
            font-size: 15px;
          }
          .icon{
            width: 60px;
            height: 60px;
          }
        }
        .warning-category-desc{
          padding-left: 70px;
          position: relative;
          font-size: 14p;
          top: -68px;
          p {
            line-height: 27px;
          }
        }
      }
      .details-list{
        margin: 10px 10px 10px 0px;
        .details-list-item{
          display: inline-block;
          font-size: 14px;
          line-height: 27px;
          background-color: #f5f5f5;
          padding: 0 10px 0 0px;
          margin: 10px 0px 10px 0px;
          color: #000;
          .icon{
            width: 20px;
            height: 20px;
            position: relative;
            top: 4px;
            margin-left: 3px;
          }
          .icon-gongan{
            color: #2382ec;
          }
          .icon-yiyuan{
            color: #f65117;
          }
          .icon-xiaofangshuan{
            color: #54aa2d;
          }
        }
      }
    }
  }
  .position-info{
    width: 287px;
    height: 264px;
    background: #fff;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    .back-btn {
      display: inline-block;
      background-color: #1c74f8;
      width: 56px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      color: #fff;
      position: absolute;
      left: -60px;
    }
    .adress-dtl{
      border-bottom: 1px dotted #aaa;
    }
    h2{
      display: inline-block;
      margin: 0;
      padding: 0;
      margin-top: 10px;
      margin-bottom: 10px;
      font-size: 18px;
    }
    .adress{
      font-size: 12px;
      display: inline-block;
      margin-bottom: 10px;
    }
    .user-dtl{
      line-height: 54px;
      border-bottom: 1px dotted #aaa;
      .user-name{
        color: #1785da;
      }
      .phone-num{
        display: inline-block;
        color: #fff;
        background: #fed669;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        padding: 0px 10px;
        margin-left: 10px;
      }
    }
  }
  .parking-lot{
    text-align: center;
    .parking-lot-item {
      display: inline-block;
      width: 74px;
    }
    .center{
      line-height: 46px;
      height: 46px;
      position: relative;
      top: -20px;
    }
    .point{
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #b8bbc0;
    }
  }
  .progress-box{
    height: 8px;
    position: relative;
    background-color: #efefef;
    margin-top: 25px;
    .progress-bg{
      width:60%;
      height: 8px;
      background-color: #4cb95c;
      position: absolute;
      .icon{
        width: 28px;
        height: 28px;
        color: #4cb95c;
      }
      .icon-map-stopping{
        position: absolute;
        right: -14px;
        top: -28px;
      }
    }
  }
}
</style>
